<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>航班数据分析系统 - 管理员</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

        :root {
            --primary: #165DFF;
            --secondary: #36CBCB;
            --accent: #FF7D00;
            --dark: #0F172A;
            --light: #F8FAFC;
        }

        body {
            font-family: 'Inter', 'system-ui', sans-serif;
            background-color: #f5f7fa;
            color: #333;
            height: 100vh;
            overflow: hidden;
        }

        .nav-active {
            background-color: var(--primary);
            color: white !important;
        }

        .background-image {
            background-image: url('https://images.unsplash.com/photo-1556388158-158ea5ccacbd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .content-overlay {
            background-color: rgba(255, 255, 255, 0.9);
        }

        .chart-container {
            height: 600px;
            min-height: 600px;
            transition: all 0.3s ease;
        }

        .menu-item {
            transition: all 0.2s ease;
        }

        .echarts-tooltip {
            max-width: 120px !important;
            opacity: 0.8 !important;
            padding: 3px !important;
            font-size: 10px !important;
            border-radius: 4px !important;
            box-shadow: 0 1px 4px rgba(0,0,0,0.25) !important;
        }

        .menu-item:hover {
            background-color: #eef4ff;
        }

        .submenu-item {
            transition: all 0.2s ease;
        }

        .submenu-item:hover {
            background-color: #dbeafe;
        }

        .chart-card {
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .chart-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
        }

        .search-results {
            height: calc(100vh - 150px);
            max-height: calc(100vh - 150px);
            overflow-y: auto;
        }

        .search-results table {
            min-width: 100%;
            border-collapse: separate;
            border-spacing: 0;
        }

        .search-results th {
            position: sticky;
            top: 0;
            background-color: var(--primary);
            color: white;
            z-index: 10;
            padding: 12px 16px;
        }

        .search-results td {
            padding: 10px 16px;
            border-bottom: 1px solid #e2e8f0;
        }

        .search-results tr:nth-child(even) {
            background-color: #f8fafc;
        }

        .search-results tr:hover {
            background-color: #eef4ff;
        }

        .no-results {
            display: none; /* 隐藏无结果提示 */
        }

    </style>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CBCB',
                        accent: '#FF7D00',
                        dark: '#0F172A',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
</head>
<body class="flex h-screen">
    <!-- 左侧导航 -->
    <nav class="w-72 bg-white shadow-md rounded-2xl p-4 space-y-2">
        <div class="p-4 border-b border-gray-100">
            <div class="flex items-center">
                <div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center">
                    <i class="fa fa-plane text-xl text-primary"></i>
                </div>
                <span class="text-xl font-bold ml-3">航班数据分析系统</span>
            </div>
        </div>

        <!-- 添加的搜索模块 -->
        <div class="search-bar bg-white shadow-md p-4">
            <div class="max-w-7xl mx-auto flex items-center">
                <div class="relative flex-1">
                    <input type="text" id="global-search"
                           class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                           placeholder="输入信息">
                    <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>
                <button id="search-button" class="ml-4 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
                搜索
                </button>
            </div>
        </div>

        <ul class="space-y-1">
            <li>
                <a href="{{ url_for('admin_index' if session.get('role') == 'admin' else 'index') }}"
                    class="flex items-center px-4 py-3 rounded-xl font-medium text-gray-700 group
                            hover:bg-blue-50 hover:text-blue-700 transition-all duration-200">
                    <div class="w-9 h-9 rounded-lg flex items-center justify-center
                                bg-blue-100 text-blue-600 group-hover:bg-blue-600 group-hover:text-white
                                transition-all duration-200">
                        <i class="fas fa-home"></i>
                    </div>
                    <span class="ml-3">首页</span>
                </a>
            </li>
            <li>
                <a href="/routes"
                    class="flex items-center px-4 py-3 rounded-xl font-medium text-gray-700 group
                            hover:bg-blue-50 hover:text-blue-700 transition-all duration-200">
                    <div class="w-9 h-9 rounded-lg flex items-center justify-center
                                bg-blue-100 text-blue-600 group-hover:bg-blue-600 group-hover:text-white
                                transition-all duration-200">
                        <i class="fas fa-home"></i>
                    </div>
                    <span class="ml-3">航线分布</span>
                </a>
            </li>
            <li>
                <a href="/airlines"
                    class="flex items-center px-4 py-3 rounded-xl font-medium text-gray-700 group
                            hover:bg-blue-50 hover:text-blue-700 transition-all duration-200">
                    <div class="w-9 h-9 rounded-lg flex items-center justify-center
                                bg-blue-100 text-blue-600 group-hover:bg-blue-600 group-hover:text-white
                                transition-all duration-200">
                        <i class="fas fa-home"></i>
                    </div>
                    <span class="ml-3">航空公司</span>
                </a>
            </li>
            <li>
                <a href="/statistics"
                    class="flex items-center px-4 py-3 rounded-xl font-medium text-gray-700 group
                            hover:bg-blue-50 hover:text-blue-700 transition-all duration-200">
                    <div class="w-9 h-9 rounded-lg flex items-center justify-center
                                bg-blue-100 text-blue-600 group-hover:bg-blue-600 group-hover:text-white
                                transition-all duration-200">
                        <i class="fas fa-home"></i>
                    </div>
                    <span class="ml-3">航班统计</span>
                </a>
            </li>
            <li>
                <a href="/price_revenue"
                    class="flex items-center px-4 py-3 rounded-xl font-medium text-gray-700 group
                            hover:bg-blue-50 hover:text-blue-700 transition-all duration-200">
                    <div class="w-9 h-9 rounded-lg flex items-center justify-center
                                bg-blue-100 text-blue-600 group-hover:bg-blue-600 group-hover:text-white
                                transition-all duration-200">
                        <i class="fas fa-home"></i>
                    </div>
                    <span class="ml-3">票价-收入分析</span>
                </a>
            </li>
            <li>
                <a href="/user_manage"
                    class="flex items-center px-4 py-3 rounded-xl font-medium text-gray-700 group
                            hover:bg-blue-50 hover:text-blue-700 transition-all duration-200">
                    <div class="w-9 h-9 rounded-lg flex items-center justify-center
                                bg-blue-100 text-blue-600 group-hover:bg-blue-600 group-hover:text-white
                                transition-all duration-200">
                        <i class="fas fa-home"></i>
                    </div>
                    <span class="ml-3">用户管理</span>
                </a>
            </li>
            <li>
                <a href="/about"
                    class="flex items-center px-4 py-3 rounded-xl font-medium text-gray-700 group
                            hover:bg-blue-50 hover:text-blue-700 transition-all duration-200">
                    <div class="w-9 h-9 rounded-lg flex items-center justify-center
                                bg-blue-100 text-blue-600 group-hover:bg-blue-600 group-hover:text-white
                                transition-all duration-200">
                        <i class="fas fa-home"></i>
                    </div>
                    <span class="ml-3">关于系统</span>
                </a>
            </li>
            <li>
                <a href="{{ url_for('logout') }}"
                    class="flex items-center px-4 py-3 rounded-xl font-medium text-gray-700 group
                            hover:bg-red-50 hover:text-red-600 transition-all duration-200">
                    <div class="w-9 h-9 rounded-lg flex items-center justify-center
                                bg-red-100 text-red-600 group-hover:bg-red-600 group-hover:text-white
                                transition-all duration-200">
                        <i class="fas fa-home"></i>
                    </div>
                    <span class="ml-3">退出登录</span>
                </a>
            </li>
        </ul>
    </nav>

    <!-- 主内容区域 -->
    <main class="flex-1 overflow-y-auto">
        <!-- 首页欢迎区域 -->
        <div id="home-content" class="background-image min-h-full flex flex-col justify-center items-center text-center p-8">
            <div class="content-overlay rounded-xl p-8 md:p-12 max-w-4xl w-full shadow-2xl">
                <h1 class="text-4xl md:text-5xl font-bold mb-8 text-gray-800">航班数据分析系统 - 管理员</h1>
                <p class="text-xl text-gray-700 mb-12 leading-relaxed">
                    基于2024年10-12月航空数据，提供全面的航班分布、航空公司表现及航班统计可视化分析，
                    帮助您深入了解航空运输状况与趋势。
                </p>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
                    <div class="bg-white p-8 rounded-2xl shadow-xl transition-all hover:shadow-2xl transform hover:scale-105">
                        <div class="bg-blue-100 p-4 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6">
                            <i class="fa fa-map text-blue-600 text-3xl"></i>
                        </div>
                        <h3 class="text-2xl font-semibold mb-4">航线分布分析</h3>
                        <p class="text-gray-600 mb-6">
                            探索全国航线网络分布、top10的繁忙城市对航线和客流量
                        </p>
                        <a href="/routes" class="text-blue-600 font-medium hover:underline">
                            查看分析 <i class="fa fa-arrow-right ml-1"></i>
                        </a>
                    </div>

                    <div class="bg-white p-8 rounded-2xl shadow-xl transition-all hover:shadow-2xl transform hover:scale-105">
                        <div class="bg-orange-100 p-4 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6">
                            <i class="fa fa-building text-orange-600 text-3xl"></i>
                        </div>
                        <h3 class="text-2xl font-semibold mb-4">航空公司分析</h3>
                        <p class="text-gray-600 mb-6">
                            探索航空公司市场份额、使用机型分布、航班班次排名及对比前六航空公司每月航班数量
                        </p>
                        <a href="/airlines" class="text-orange-600 font-medium hover:underline">
                            查看分析 <i class="fa fa-arrow-right ml-1"></i>
                        </a>
                    </div>

                    <div class="bg-white p-8 rounded-2xl shadow-xl transition-all hover:shadow-2xl transform hover:scale-105">
                        <div class="bg-green-100 p-4 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6">
                            <i class="fa fa-bar-chart text-green-600 text-3xl"></i>
                        </div>
                        <h3 class="text-2xl font-semibold mb-4">航班统计分析</h3>
                        <p class="text-gray-600 mb-6">
                            探索航班出发时间分布、航班量变化趋势、航班总体准点率及每日top10的航班量
                        </p>
                        <a href="/statistics" class="text-green-600 font-medium hover:underline">
                            查看分析 <i class="fa fa-arrow-right ml-1"></i>
                        </a>
                    </div>

                    <div class="bg-white p-8 rounded-2xl shadow-xl transition-all hover:shadow-2xl transform hover:scale-105">
                        <div class="bg-purple-100 p-4 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6">
                            <i class="fa fa-money text-purple-600 text-3xl"></i>
                        </div>
                        <h3 class="text-2xl font-semibold mb-4">票价-收入分析</h3>
                        <p class="text-gray-600 mb-6">
                            探索票价分布情况、不同飞行时长区间的票价分布及平均收入随飞行时长的变化，为收入分析提供数据支持
                        </p>
                        <a href="/price_revenue" class="text-purple-600 font-medium hover:underline">
                            查看分析 <i class="fa fa-arrow-right ml-1"></i>
                        </a>
                    </div>
                </div>

                <div class="bg-white rounded-2xl shadow-xl p-8 max-w-2xl mx-auto">
                    <h2 class="text-3xl font-bold mb-6">系统特点</h2>
                    <ul class="grid grid-cols-1 md:grid-cols-2 gap-6 text-left">
                        <li class="flex items-start">
                        <i class="fa fa-check-circle text-green-500 mt-1 mr-3"></i>
                            <span>动态航线可视化与繁忙城市对航线</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-3"></i>
                            <span>航空公司市场份额与机型使用统计</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-3"></i>
                            <span>航班时间分布与总体准点率</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-3"></i>
                            <span>航班量趋势预测与历史数据分析</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-3"></i>
                            <span>强大的数据库搜索功能</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-3"></i>
                            <span>响应式设计适配各种设备</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 搜索结果区域 -->
        <div id="search-results-content" class="hidden min-h-full p-8 bg-white flex flex-col">
            <div class="flex items-center justify-between mb-4">
                <h1 class="text-2xl font-bold text-gray-800">航班数据搜索结果</h1>
                <button class="text-gray-500 hover:text-gray-700" id="clear-search">
                    <i class="fa fa-times mr-1"></i> 清除搜索
                </button>
            </div>

            <div class="search-results bg-gray-50 rounded-xl shadow-inner">
                <table class="w-full text-sm text-left text-gray-700">
                    <thead class="text-xs text-gray-100 uppercase bg-primary sticky top-0">
                        <tr>
                            <th class="px-4 py-3">航班班次</th>
                            <th class="px-4 py-3">机型</th>
                            <th class="px-4 py-3">出发城市</th>
                            <th class="px-4 py-3">到达城市</th>
                            <th class="px-4 py-3">航空公司</th>
                            <th class="px-4 py-3">起飞机场</th>
                            <th class="px-4 py-3">降落机场</th>
                            <th class="px-4 py-3">起飞时间</th>
                            <th class="px-4 py-3">降落时间</th>
                            <th class="px-4 py-3">价格(元)</th>
                            <th class="px-4 py-3">飞行时长(分钟)</th>
                        </tr>
                    </thead>
                    <tbody id="search-results-body" class="divide-y divide-gray-200">
                        <!-- 搜索结果将在这里动态填充 -->
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 图表内容区域：替换此处渲染逻辑 -->
        <div id="chart-content" class="hidden min-h-full p-8 bg-gray-50">
            <div class="max-w-7xl mx-auto space-y-10">
                <!-- 动态航线图 -->
                <section class="chart-card bg-white rounded-xl shadow-lg p-6">
                    <h2 class="text-xl font-semibold mb-4">动态航线图</h2>
                    {{ flight_map_html | safe }}
                </section>

                <!-- 最繁忙城市对航线柱状图 -->
                <section class="chart-card bg-white rounded-xl shadow-lg p-6">
                    <h2 class="text-xl font-semibold mb-4">top10繁忙城市对航线柱状图</h2>
                    {{ busiest_routes_html | safe }}
                </section>

                <!-- 每日航班TOP10 -->
                <section class="chart-card bg-white rounded-xl shadow-lg p-6">
                    <h2 class="text-xl font-semibold mb-4">每日航班量前十动态图</h2>
                    {{ top10_airlines_html | safe }}
                </section>

                <!-- 航班班次分布 -->
                <section class="chart-card bg-white rounded-xl shadow-lg p-6">
                    <h2 class="text-xl font-semibold mb-4">航空公司航班班次分布</h2>
                    {{ airline_counts_html | safe }}
                </section>

                <!-- 出发时间分布 -->
                <section class="chart-card bg-white rounded-xl shadow-lg p-6">
                    <h2 class="text-xl font-semibold mb-4">航班出发时间分布</h2>
                    {{ departure_time_html | safe }}
                </section>

                <!-- 机型使用分布 -->
                <section class="chart-card bg-white rounded-xl shadow-lg p-6">
                    <h2 class="text-xl font-semibold mb-4">前十大机型分布</h2>
                    {{ aircraft_model_html | safe }}
                </section>

                <!-- 航班量趋势 -->
                <section class="chart-card bg-white rounded-xl shadow-lg p-6">
                    <h2 class="text-xl font-semibold mb-4">航班量趋势图</h2>
                    {{ flight_trend_html | safe }}
                </section>

                <!-- 航空公司市场份额 -->
                <section class="chart-card bg-white rounded-xl shadow-lg p-6">
                    <h2 class="text-xl font-semibold mb-4">航空公司市场份额</h2>
                    {{ airline_share_html | safe }}
                </section>

                <!-- 准点率仪表盘 -->
                <section class="chart-card bg-white rounded-xl shadow-lg p-6">
                    <h2 class="text-xl font-semibold mb-4">整体准点率</h2>
                    {{ ontime_rate_html | safe }}
                </section>

                <!-- 前六航空公司每月航班数量对比堆叠图 -->
                <section class="chart-card bg-white rounded-xl shadow-lg p-6">
                    <h2 class="text-xl font-semibold mb-4">前六航空公司每月航班数量对比堆叠图</h2>
                    {{ top6_flights_html | safe }}
                </section>

                <!-- 票价分布图 -->
                <section class="chart-card bg-white rounded-xl shadow-lg p-6">
                    <h2 class="text-xl font-semibold mb-4">票价分布图</h2>
                    {{ price_distribution_html | safe }}
                </section>

                <!-- 不同飞行时长区间的票价分布箱线图 -->
                <section class="chart-card bg-white rounded-xl shadow-lg p-6">
                    <h2 class="text-xl font-semibold mb-4">不同飞行时长区间的票价分布箱线图</h2>
                    {{ boxplot_html | safe }}
                </section>

                <!-- 平均收入随飞行时长变化的折线图 -->
                <section class="chart-card bg-white rounded-xl shadow-lg p-6">
                    <h2 class="text-xl font-semibold mb-4">平均收入随飞行时长变化的折线图</h2>
                    {{ line_chart_html | safe }}
                </section>

            </div>
        </div>
    </main>

    <script>
        // 初始化页面
        document.addEventListener('DOMContentLoaded', function() {

            // 设置导航功能
            setupNavigation();

            // 设置搜索功能
            setupSearch();

            // 初始化图表
            initCharts();
        });

        // 设置导航功能
        function setupNavigation() {
            // 显示内容函数
            function showContent(contentId) {
                // 隐藏所有内容
                document.getElementById('home-content').classList.add('hidden');
                document.getElementById('search-results-content').classList.add('hidden');
                document.getElementById('chart-content').classList.add('hidden');

                // 显示请求的内容
                if (contentId) {
                    document.getElementById(contentId).classList.remove('hidden');
                } else {
                    document.getElementById('home-content').classList.remove('hidden');
                }

                // 滚动到顶部
                window.scrollTo(0, 0);
            }

            // 处理导航点击
            document.querySelectorAll("a[href^='#/']").forEach(anchor => {
                anchor.addEventListener("click", function(e) {
                    e.preventDefault();
                    const target = this.getAttribute("href").substring(2);

                    if (chartData[target]) {
                        showChart(target);
                    } else if (target === 'about') {
                        // 关于页面逻辑
                        alert('关于系统页面');
                    } else {
                        showContent('home-content');
                    }
                });
            });

            // 处理首页链接
            document.querySelectorAll("a[href='#/']").forEach(anchor => {
                anchor.addEventListener("click", function(e) {
                    e.preventDefault();
                    showContent('home-content');
                });
            });
        }

        // 设置搜索功能
        function setupSearch() {
            const searchInput = document.getElementById('global-search');
            const searchButton = document.getElementById('search-button');
            const clearBtn = document.getElementById('clear-search');
            const resultsBody = document.getElementById('search-results-body');
            const resultsContainer = document.getElementById('search-results-content');

            searchButton.addEventListener('click', function() {
                const query = searchInput.value.trim();
                if (query) {
                    performRealSearch(query);
                }
            });

            searchInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    const query = searchInput.value.trim();
                    if (query) {
                        performRealSearch(query);
                    }
                }
            });

            clearBtn.addEventListener('click', function() {
                searchInput.value = '';
                resultsContainer.classList.add('hidden');
                document.getElementById('home-content').classList.remove('hidden');
            });

            function performRealSearch(query) {
                resultsBody.innerHTML = '<tr><td colspan="11" class="text-center py-4">搜索中...</td></tr>';
                resultsContainer.classList.remove('hidden');
                document.getElementById('home-content').classList.add('hidden');
                document.getElementById('chart-content').classList.add('hidden');

                const searchUrl = `http://127.0.0.1:5000/search?query=${encodeURIComponent(query)}`;
                console.log("搜索请求URL:", searchUrl);

                fetch(searchUrl)
                    .then(response => {
                        if (!response.ok) {
                            throw new Error(`HTTP错误: ${response.status}`);
                        }
                        return response.json();
                    })
                    .then(data => {
                        resultsBody.innerHTML = '';
                        if (data.length === 0) {
                            resultsBody.innerHTML = '<tr><td colspan="11" class="text-center py-4">未找到匹配的航班数据</td></tr>';
                        } else {
                            data.forEach(item => {
                                const row = document.createElement('tr');
                                row.className = 'bg-white hover:bg-blue-50';

                                // 格式化时间
                                const formatTime = (timeStr) => {
                                    if (!timeStr) return '-';
                                    const date = new Date(timeStr);

                                    // 添加月和日的格式化
                                    const month = date.getMonth() + 1; // getMonth() 返回 0-11，需要+1
                                    const day = date.getDate();

                                    return `${month}月${day}日 ` + date.toLocaleTimeString('zh-CN', {
                                        hour: '2-digit',
                                        minute: '2-digit',
                                        hour12: false // 使用24小时制
                                    });
                                };

                                // 格式化价格
                                const formatPrice = (price) => {
                                    return price ? '¥' + price : '-';
                                };

                                row.innerHTML = `
                                    <td class="font-medium">${item.航班班次 || '-'}</td>
                                    <td>${item.机型 || '-'}</td>
                                    <td>${item.出发城市 || '-'}</td>
                                    <td>${item.到达城市 || '-'}</td>
                                    <td>${item.航空公司 || '-'}</td>
                                    <td>${item.起飞机场 || '-'}</td>
                                    <td>${item.降落机场 || '-'}</td>
                                    <td>${item.起飞时间 ? formatTime(item.起飞时间) : '-'}</td>
                                    <td>${item.降落时间 ? formatTime(item.降落时间) : '-'}</td>
                                    <td class="font-bold text-blue-600">${formatPrice(item.价格_元)}</td>
                                    <td>${item.飞行时长_分钟 || '-'} 分钟</td>
                                `;
                                resultsBody.appendChild(row);
                            });
                        }
                    })
                    .catch(error => {
                        console.error('搜索失败:', error);
                        resultsBody.innerHTML = '<tr><td colspan="11" class="text-center py-4 text-red-500">搜索失败，请稍后再试</td></tr>';
                    });
            }
        }

        // 初始化图表
        function initCharts() {
            // 初始化ECharts实例
            const chartDom = document.getElementById('main-chart');
            const myChart = echarts.init(chartDom);

            // 设置默认选项
            const option = {
                title: {
                    text: '航班数据分析',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['航班量'],
                    bottom: 10
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '15%',
                    top: '15%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '航班量',
                        type: 'line',
                        smooth: true,
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        lineStyle: {
                            width: 4,
                            color: '#36CBCB'
                        },
                        itemStyle: {
                            color: '#36CBCB'
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgba(54, 203, 203, 0.5)' },
                                { offset: 1, color: 'rgba(54, 203, 203, 0.1)' }
                            ])
                        }
                    }
                ]
            };

            myChart.setOption(option);

            // 响应窗口大小变化
            window.addEventListener('resize', function() {
                myChart.resize();
            });
        }

        // 显示图表
        function showChart(chartId) {
            const data = chartData[chartId];
            if (!data) return;

            // 更新图表标题和描述
            document.getElementById('chart-title').textContent = data.title;
            document.getElementById('chart-subtitle').textContent = data.subtitle;
            document.getElementById('chart-description').innerHTML = data.description;

            // 显示图表区域
            document.getElementById('home-content').classList.add('hidden');
            document.getElementById('search-results-content').classList.add('hidden');
            document.getElementById('chart-content').classList.remove('hidden');

            // 在这里可以添加特定图表的渲染逻辑
            // 例如：renderSpecificChart(chartId);

            // 重新调整图表大小
            setTimeout(() => {
                const chartDom = document.getElementById('main-chart');
                const myChart = echarts.getInstanceByDom(chartDom);
                if (myChart) {
                    myChart.resize();
                }
            }, 100);
        }
    </script>
</body>
</html>